<template>
	<view class="content">
		<view class="example-body1">
			<uni-nav-bar 
			left-icon="iconzuojiantou-01" 
			@clickLeft="getBack"
			:border="false" 
			leftFontSize="36" 
			:title="title"
			fixed="true"
			appFixed="true" >
			<view slot="right" @click="save" >
				保存
			</view>
			</uni-nav-bar> 
		</view>
		<view class="form-wrap">
			<view class="form-title">征友条件</view>
			<view class="form-item">
				<view class="label">所在地</view>
				<view class="value">
					<picker  @change="citySelector" :value="cityIndex" :range="cityList" range-key="label">
						<view class="picker">{{form.location?form.location:'请选择所在地'}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">年龄范围</view>
				<view class="value">
					<picker mode="multiSelector" @columnchange="ageColumnChange" :value="ageIndex" :range="ageList">
						<view class="picker" v-if="form.minAge != 0 && form.maxAge != 0">{{form.minAge}}~{{form.maxAge}}</view>
						<view class="picker" v-else>不限</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">身高范围</view>
				<view class="value">
					<picker mode="multiSelector" @columnchange="heightColumnChange" @change="heightChange" v-model="heightIndex" vm :range="heightList">
						<view class="picker" v-if="form.minStature != 0 && form.maxStature != 0">{{form.minStature}}~{{form.maxStature}}</view>
						<view class="picker" v-else>不限</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">最低学历</view>
				<view class="value">
					<picker @change="eduSelector" :value="eduIndex" :range="eduList">
						<view class="picker">{{form.education?eduList[form.education]:'不限'}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			<view class="form-item">
				<view class="label">最低收入</view>
				<view class="value">
					<picker @change="incomeSelector" :value="incomeIndex" :range="incomeList">
						<view class="picker">{{form.income?incomeList[form.income]:'不限'}}</view>
					</picker>
				</view>
				<view class="uni-icon uni-icon-arrowright"></view>
			</view>
			
		</view>
		<view class="zy-text">
			- 完善择偶信息可以让你更好的匹配到你喜欢的异性-
		</view>
	</view>
</template>

<script>
	import city from '@/common/city.data.js'
	import * as ResponseStatus from '@/common/response-status.js'
	import {arrayMonthIncome,arrayEducation } from '@/common/picker-data.js'
	import {
		showInfoToast,
		doGet,
		doPostJson,
		MY_SHARE_CODE,
		SHARE_CODE_PAGE_IMG,
		SHARE_TITLE,
		SHARE_CODE,
		FRONT_BASE_URL,
		LOCAL_FILE_STORAGE,
		USER_ROLES,
		USER_ID,
		USER_NICKNAME,
		USER_HEADICON,
		HOST_ROOM_INFO
	} from '@/common/util.js'
	export default {
		data() {
			return {
				userInfo: {},
				form: {
					location: '',
					minAge: 0,
					maxAge: 0,
					minStature: 0,
					maxStature: 0,
					education: '',
					income: '',
				},
				cityList: city,
				cityIndex: 0,
				ageList: [
					['最小年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70],
					['最大年龄',18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70]
				],
				ageIndex: [0, 0],
				heightList: [
					['最低身高',140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200],
					['最高身高',140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200]
				],
				heightIndex: [0, 0],
				eduList: arrayEducation,
				eduIndex: 0,
				incomeList: arrayMonthIncome,
				incomeIndex: 0,
				title:"完善择偶条件",
			}
		},
		onLoad(options) {
			console.log(options)
			if(options.title){
				this.title = options.title;
			}
		},
		onReady() {
			uni.hideTabBar();
		},
		onShow() {
			this.getFriend()
		},
		methods: {
			getFriend(){
				doGet('/user-friend-condition/user/one', {}, {}, true).then(response => {
					let [err, res] = response
					if (res.data.code === ResponseStatus.OK) {
						this.form = res.data.data;
						this.heightIndex = [0,0]
						this.ageIndex = [0,0]
						this.heightList[0].forEach((item,index) =>{
							if(this.form.minStature == item){
								this.heightIndex[0] = index;
							}
							if(this.form.maxStature == item){
								this.heightIndex[1] = index;
							}
						})
						this.ageList[0].forEach((item,index) =>{
							if(this.form.minAge == item){
								this.ageIndex[0] = index;
							}
							if(this.form.maxAge == item){
								this.ageIndex[1] = index;
							}
						})
						this.cityList.forEach((item,index) =>{
							if(this.form.location == item.label){
								this.cityIndex = index;
							}
						})
						this.eduIndex =this.form.education
						this.incomeIndex = this.form.income;
					}
				}).catch(error => {})
				
			},
			getBack(){
				uni.navigateBack({})
			},
			save(){
				if (this.form.location == '') {
					uni.showToast({
						title: '请选择所在地',
						position: 'bottom',
						icon: 'none'
					});
					return false;
				}
				// if (this.form.minAge == '' || this.form.minAge == '最小年龄' || this.form.maxAge == '' || this.form.minAge == '最大年龄') {
				// 	uni.showToast({
				// 		title: '请选择年龄范围',
				// 		position: 'bottom',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// if (this.form.minStature == '' || this.form.minStature == '最低身高' || this.form.maxStature == '' || this.form.minStature == '最高身高') {
				// 	uni.showToast({
				// 		title: '请选择身高范围',
				// 		position: 'bottom',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// if (this.form.education == '' || this.form.education == 0) {
				// 	uni.showToast({
				// 		title: '请选择最低学历',
				// 		position: 'bottom',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				// if (this.form.income == '' || this.form.income == 0) {
				// 	uni.showToast({
				// 		title: '请选择最低月收入',
				// 		position: 'bottom',
				// 		icon: 'none'
				// 	});
				// 	return false;
				// }
				uni.showLoading({
					title: '',
				});
				doPostJson('/user-friend-condition/user/save', this.form, {}, true).then(response => {
					let [err, res] = response
					if (res.data.code === ResponseStatus.OK) {
						showInfoToast(res.data.message);
						setTimeout(()=>{
							uni.navigateBack({})
						},1000)
					} else {
						showInfoToast(res.data.message)
						
					}
				}).catch(error => {})
			},
			citySelector: function (e) {
				console.log(e)
				this.cityIndex = e.target.value
				this.form.location = this.cityList[this.cityIndex].label
			},
			ageChange(e){
				this.ageIndex[0] = e.detail.value[0]
				this.ageIndex[1] = e.detail.value[1]
				this.form.minAge = this.ageList[0][this.ageIndex[0]];
				this.form.maxAge = this.ageList[1][this.ageIndex[1]];
				if(this.ageIndex[0] ==0&&this.ageIndex[1] ==0){
					this.form.minAge = 0;
					this.form.maxAge = 0;
				}else if (this.ageIndex[0] ==0&&this.ageIndex[1] >0){
					this.form.minAge = 18;
				}
			},
			ageColumnChange: function(e) {
				this.ageIndex.splice(e.detail.column, 1, e.detail.value)
				switch (e.detail.column) {
					case 0:
						if (this.ageIndex[0] > this.ageIndex[1]) {
							this.ageIndex.splice(1, 1, e.detail.value)
						}
						break;
					case 1:
						if (this.ageIndex[1] < this.ageIndex[0]) {
							this.ageIndex.splice(0, 1, e.detail.value)
						}
						break;
				}
				this.form.minAge = this.ageList[0][this.ageIndex[0]];
				this.form.maxAge = this.ageList[1][this.ageIndex[1]];
				if(this.ageIndex[0] ==0&&this.ageIndex[1] ==0){
					this.form.minAge = 0;
					this.form.maxAge = 0;
				}else if (this.ageIndex[0] ==0&&this.ageIndex[1] >0){
					this.form.minAge = 18;
				}
			},
			heightChange(e){
				console.log(e)
				this.heightIndex[0] = e.detail.value[0]
				this.heightIndex[1] = e.detail.value[1]
				this.form.minStature = this.heightList[0][this.heightIndex[0]];
				this.form.maxStature = this.heightList[1][this.heightIndex[1]];
				if(this.heightIndex[0] ==0&&this.heightIndex[1] ==0){
					this.form.minStature = 0;
					this.form.maxStature = 0;
				}else if (this.heightIndex[0] ==0&&this.heightIndex[1] >0){
					this.form.minStature = 140;
				}
			},
			heightColumnChange: function(e) {
				this.heightIndex.splice(e.detail.column, 1, e.detail.value)
				switch (e.detail.column) {
					case 0:
						if (this.heightIndex[0] > this.heightIndex[1]) {
							this.heightIndex.splice(1, 1, e.detail.value)
						}
						break;
					case 1:
						if (this.heightIndex[1] < this.heightIndex[0]) {
							this.heightIndex.splice(0, 1, e.detail.value)
						}
						break;
				}
				// console.log(this.heightIndex[0]+"~"+this.heightIndex[1])
				this.form.minStature = this.heightList[0][this.heightIndex[0]];
				this.form.maxStature = this.heightList[1][this.heightIndex[1]];
				if(this.heightIndex[0] ==0&&this.heightIndex[1] ==0){
					this.form.minStature = 0;
					this.form.maxStature = 0;
				}else if (this.heightIndex[0] ==0&&this.heightIndex[1] >0){
					this.form.minStature = 140;
				}
			},
			eduSelector: function (e) {
				this.eduIndex = e.target.value
				if (this.eduIndex == 0) {
					this.form.education = 0
				}else if (this.eduIndex != 0) {
					this.form.education = this.eduIndex
				}
			},
			incomeSelector: function (e) {
				this.incomeIndex = e.target.value
				if (this.incomeIndex == 0) {
					this.form.income = 0
				}else if (this.incomeIndex != 0) {
					this.form.income = this.incomeIndex
				}
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/zywork-main.scss';
	page{
		background-color: #f5f5f5;
	}
	.zy-text{
		margin-top: 50rpx;
		text-align: center;
		font-size: $font-sm;
	}
	.form-wrap {
		padding: 0 20rpx;
		background: #fff;
		margin-bottom: 10rpx;
		.form-title {
			font-size: 30rpx;
			color: #333;
			padding: 20rpx 30rpx;
			position: relative;
			&::before {
				content: '';
				display: block;
				width: 10rpx;
				height: 30rpx;
				background-color: $base-color;
				position: absolute;
				left: -10rpx;
				top: 50%;
				margin-top: -15rpx;
			}
		}
		.form-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10rpx 20rpx;
			border-top: 1rpx solid #efefef;
			.label {
				color: #9c9c9c;
				.title {
					color: #000;
					font-size: $font-base;
				}
				.tips {
					color: #666;
					font-size: $font-sm;
				}
				
			}
			.value {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				height: 80rpx;
				color: #888;
				input {
					padding-right: 0;
					text-align: right;
				}
				.picker{
					color: $base-color-default;
				}
			}
			.uni-icon-arrowright {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
			}
		}
	}
</style>
